<template>
  <div class="technicitem">
    <div class="items">
      <div class="item">
        <div class="left">
          <div class="itemTitle" v-html="item.title"></div>
          <div class="itemBottom">
            <span class="time">{{ item.created_at | formatTime }}</span>
            <div class="watch">
              <i class="iconfont icon-icon_liulanliang"></i>
              <span>{{ item.read }}</span>
            </div>
            <div class="zan">
              <i class="iconfont icon-icon_dianzanliang"></i>
              <span>{{ item.star }}</span>
            </div>
          </div>
        </div>
        <div class="right">
          <img :src="item.cover" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { articlesTechnic } from '@/api/api.js'
export default {
  props: ['item']
}
</script>

<style lang="less" scoped>
.items {
  padding: 0 18px;
  .item {
    display: flex;
    padding-bottom: 28px;
    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .itemTitle {
        font-size: 16px;
      }
      .itemBottom {
        font-size: 12px;
        display: flex;
        color: #ccc;
        .time {
          flex: 1;
        }
        .watch {
          margin-right: 24px;
          display: flex;
          align-items: center;
          .icon-icon_liulanliang {
            padding-right: 5px;
          }
        }
        .zan {
          display: flex;
          align-items: center;
          .icon-icon_dianzanliang {
            padding-right: 5px;
          }
        }
      }
    }
    .right {
      height: 82px;
      margin-left: 16px;
      img {
        width: 114px;
        height: 82px;
      }
    }
  }
}
</style>
